<template>
  <div class="app-container">
    <el-form ref="paramsForm" :model="paramsForm" :label-width="formLabelWidth" :rules="paramsFormRules">
      <el-form-item label="返利开关" prop="returnMoney">
        <el-switch
          :value="paramsForm.returnMoney"
          :disabled="!isAdmin"
          active-value="on"
          inactive-value="off"
          @change="returnMoneyChange"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { mapGetters } from 'vuex' // waves directive
import { returnMoneySwitch, loadReturnMoneySwitch } from '@/api/lucky-money'
export default {
  name: 'SysParams',
  directives: { waves },
  data() {
    return {
      paramsFormRules: {
      },
      // 界面数据
      paramsForm: {
        returnMoney: 'on'
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'formLabelWidth']),
    isAdmin() {
      const roles = this.userInfo.roles || []
      return roles.indexOf('Admin') !== -1
    }
  },
  created() {
    loadReturnMoneySwitch().then(({ success, data }) => {
      if (success) {
        this.paramsForm.returnMoney = data
      }
    }, (message) => {
    })
  },
  methods: {
    returnMoneyChange(val) {
      const old = this.paramsForm.returnMoney
      this.paramsForm.returnMoney = val
      returnMoneySwitch(val).then(({ success, message }) => {
        if (success) {
          this.$message({
            message: message || '保存成功',
            type: 'success'
          })
        }
      }, () => {
        this.paramsForm.returnMoney = old
      })
    }
  }
}
</script>

<style scoped>

</style>
